<template>
    <div class="cate">
        <!-- 侧边栏 -->
        <div class="left">
            <van-sidebar v-model="activeKey">
                <van-sidebar-item v-for="item in categoryList" :kye="item.id" :title="item.name"
                    @click="switchHandler(item.id)"></van-sidebar-item>
            </van-sidebar>
        </div>
        <!-- 内容 -->
        <div class="right">
            <!-- 图片 -->
            <div style="position: relative;">
                <van-image radius="5px" class="img" fit="cover" :src="fenlei.banner_url"></van-image>
                <div class="desc">{{ fenlei.front_name }}</div>
            </div>
            <!-- 标题 -->
            <div class="tip">
                <span class="xian"></span>
                <div class="title">{{ fenlei.name }}</div>
                <span class="xian1"></span>
            </div>
            <!-- 图标 -->
            <van-grid :column-num="3" :border="false">
                <van-grid-item v-for="value in fenlei.subCategoryList" :key="value.id" :icon="value.banner_url"
                    :text="value.name" />
            </van-grid>
        </div>
        <div class="loading">
            <van-loading v-show="loading" class="loading1">加载中...</van-loading>
        </div>
    </div>
</template>

<script>
import { getCategory, getCurrent } from '@/http/api'

export default {
  data () {
    return {
      // 全部分类列表
      categoryList: [],
      // 当前分类id
      activeKey: 0,
      // 当前分类列表
      fenlei: [],
      // 加载效果
      loading: false
    }
  },
  methods: {
    // 全部分类列表
    getData () {
      this.loading = true
      getCategory().then(res => {
        this.fenlei = res.data.data.currentCategory
        this.categoryList = res.data.data.categoryList
      }).finally(() => {
        this.loading = false
      })
    },
    // 切换
    switchHandler (id) {
      this.loading = true
      getCurrent(id).then(res => {
        this.fenlei = res.data.data.currentCategory
      }).finally(() => {
        this.loading = false
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped>
.cate {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.left {
    background-color: #f7f8fa;
    overflow-y: scroll;
    overflow-x: hidden;
}

.right {
    width: 79%;
    padding: 5px;
    margin-left: 20px;
    overflow-y: scroll;
}

.loading {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
}

.img {
    width: 95%;
    height: 140px;
    box-shadow: 0 0 5px #000;
    filter: brightness(.5);
}

.desc {
    font-size: 16px;
    font-weight: 400;
    width: 100%;
    position: absolute;
    color: white;
    text-align: center;
    top: 48%;
    left: 0;
}

.tip {
    width: 100%;
    height: 50px;
    position: relative;
}

.title {
    width: 100%;
    height: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xian {
    width: 30px;
    height: 2px;
    background-color: #ccc;
    position: absolute;
    top: 25px;
    left: 70px;
}

.xian1 {
    width: 30px;
    height: 2px;
    background-color: #ccc;
    position: absolute;
    top: 25px;
    right: 70px;
}
</style>
